<template>
  <div class="wrap">
    <div class="header">
      <a href="#" class="logo">
        <img src="../../assets/logo.png" alt="石家庄金冠中医骨病医院">
      </a>
    </div>
    <div class="video-wrapper">
      <div class="video">
        <video width="100%" height="100%" style="object-fit: fill;" id="videoElement"></video>
      </div>
    </div>
    <div class="tip-wrapper">
      <p class="tip">
        请在下方输入您想要咨询的问题点击
        <span>发送</span>按钮咨询医生
      </p>
    </div>
    <div class="message-wrapper">
      <div class="message-title">聊天大厅</div>
      <div class="message-scroll">
        <div class="message" v-for="(item, index) in messages" :key="index">
          <div>
            <div class="saystime">{{item.time}}</div>
            <div class="others" :class="{self: item.myCode == myCode}">
              <div class="bubble clearfix">
                <div class="chatbubble">{{item.msg}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="form">
      <input
        type="text"
        id="sendText"
        placeholder="请在此输入您的问题"
        class="sendText"
        v-model="msg"
        @keyup.enter="send(msg)"
      >
      <button class="sendBtn" @click="send(msg)">发送</button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import moment from "moment";
import VueSocketIO from "vue-socket.io";
import cookie from "js-cookie";
import flvjs from "flv.js";
import axios from 'axios'
Vue.use(
  new VueSocketIO({
    debug: true,
    connection: "http://192.168.66.132:8080/"
  })
);
export default {
  name: "liveForm",
  data () {
    return {
      msg: "",
      serviceId: "",
      chatId: cookie.get("chatId"),
      messages: [],
      myCode: cookie.get("myCode"),
      myName: cookie.get("name"),
      newServiceId: ""
    };
  },
  mounted () {
    axios.get('http://192.168.66.132:8080/getChat', {
      params: {
        chatId: this.chatId
      }
    }).then(res => {
      this.messages = res.data
    })
    this.sockets.subscribe("privates", data => {
      // 当前患者发送的消息
      this.messages = data.data
    })
    this.$socket.emit("login", {
      chatId: cookie.get("chatId"),
      serviceId: cookie.get("serviceId"),
      mySocketId: cookie.get("mySocketId"),
      patientName: cookie.get("patientName")
    })
    if (flvjs.isSupported()) {
      let videoElement = document.getElementById("videoElement")
      let flvPlayer = flvjs.createPlayer({
        type: "flv",
        url: "http://192.168.66.132:1936/flv/jinguan.flv"
      })
      flvPlayer.attachMediaElement(videoElement)
      flvPlayer.load()
      flvPlayer.play()
    }
  },
  sockets: {
    connect: function () {
      console.log("连接服务器成功")
      // 接受服务器返回的数据
      this.sockets.subscribe("getChatId", data => {
        // 判断有没有设置对话ID
        if (!cookie.get("chatId")) {
          cookie.set("chatId", data.chatId)
          cookie.set("myCode", data.myCode)
          cookie.set("serviceId", data.serviceId)
          cookie.set("myName", data.myName)
          cookie.set("patientName", data.patientName)
          cookie.set("mySocketId", data.mySocketId)
          this.serviceId = data.serviceId
          this.chatId = data.chatId
          this.myName = data.myName
          this.myCode = data.myCode
        }
      })
    },
    customEmit: function (data) {
      console.log(
        'this method was fired by the socket server. eg: io.emit("customEmit", data)'
      )
    }
  },
  methods: {
    send (msg) {
      console.log(cookie.get("serviceId"))
      if (cookie.get("serviceId")) {
        let transdata = {
          mySocketId: this.$socket.id,
          serviceId: cookie.get("serviceId"),
          chatId: cookie.get("chatId"),
          msg: msg,
          time: moment().format("YYYY-MM-DD HH:mm:ss"),
          myCode: cookie.get("myCode"),
          myName: cookie.get("myName")
        }
        if (msg) {
          this.$socket.emit("private", transdata);
          this.messages.push({
            chatId: this.chatId,
            msg: msg,
            time: moment().format("YYYY-MM-DD HH:mm:ss"),
            myCode: this.myCode
          })
        }
      }
      this.msg = ""
    }
  },
  updated () {
    // 接受私聊消息
    this.sockets.subscribe("privates", data => {
      // 当前患者发送的消息
      console.log(data.newServiceId)
      this.messages = data.data
      if (cookie.get("serviceId") !== data.newServiceId) {
        cookie.set("serviceId", data.newServiceId)
      }
    })
    this.$nextTick(function () {
      var div = document.querySelector(".message-scroll")
      div.scrollTop = div.scrollHeight
    })
  }
}
</script>

<style scoped>
.wrap {
  margin: 0 auto;
}
.wrap .header {
  height: 1.1rem;
  background-color: #1e93ff;
}
.wrap .header .logo {
  display: block;
  width: 100%;
  height: 100%;
}
.wrap .header .logo img {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 12px;
}
.wrap .video-wrapper {
  height: 4rem;
}
.wrap .video-wrapper .video {
  width: 100%;
  height: 100%;
}
.wrap .tip-wrapper {
  height: 0.8rem;
  background-color: #1e93ff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap .tip-wrapper .tip {
  font-size: 0.24rem;
  color: #fff;
}
.wrap .tip-wrapper .tip span {
  color: red;
}
.wrap .message-wrapper {
  border-top: 1px #fff solid;
}
.wrap .message-wrapper .message-title {
  height: 0.6rem;
  background-color: #1e93ff;
  font-size: 0.24rem;
  color: #fff;
  text-align: center;
  line-height: 0.6rem;
}
.wrap .message-wrapper .message-scroll {
  width: 100%;
  height: 4.8rem;
  overflow-y: auto;
  padding: .2rem 0;
}
.wrap .message-wrapper .message-scroll .message {
  position: relative;
  width: 100%;
  margin-bottom: 0.1rem;
}
.wrap .message-wrapper .message-scroll .message .saystime {
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  color: #999;
  margin-bottom: 0.1rem;
}

.wrap .message-wrapper .message-scroll .message .self {
  position: relative;
  width: 100%;
  height: 0.64rem;
}
.wrap .message-wrapper .message-scroll .message .others {
  position: relative;
  width: 100%;
  height: 0.64rem;
}
.wrap .message-wrapper .message-scroll .message .bubble {
  width: 100%;
}
.wrap .message-wrapper .message-scroll .message .bubble .chatbubble {
  float: left;
  margin-left: 10px;
  min-width: 0;
  max-width: 2.8rem;
  line-height: 20px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  color: #333;
  border-radius: 5px;
  border: 1px solid #ededed;
}
.wrap .message-wrapper .message-scroll .message .self .bubble .chatbubble {
  float: right;
  margin-right: 10px;
  min-width: 0;
  max-width: 2.8rem;
  line-height: 20px;
  background-color: #9eea6a;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  color: #333;
  border-radius: 5px;
  border: 1px solid #ededed;
}

.wrap .form {
  height: 0.6rem;
  display: flex;
}
.wrap .form .sendText {
  flex: 1;
  border: 2px #ff0000 solid;
  color: #666;
  font-size: 0.24rem;
  line-height: 0.6rem;
  padding-left: 0.2rem;
}
.wrap .form .sendBtn {
  display: block;
  width: 1.5rem;
  height: 0.6rem;
  font-size: 0.26rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  background-color: #ff0000;
  border: none;
}
</style>
